<template>
	<div style="text-align: center;">
	<h3 style="text-align: center;">目前实现国家到省，不存在子地图时，停止下钻，双击空白处返回上一级</h3>
	<p>
		<select v-model="selectedValue" @change="onChange">
			<option value="china">存在南海</option>
			<option value="china-no-nanhai">不存在南海</option>
		</select>
	</p>
	
	<div ref="chartContainer" :style="{margin:'20px auto', width:w+'px', height: h+'px'}" @dblclick="menuAction()" ></div>
	</div>
</template>

<script >
import * as echarts from 'echarts';

import { ref } from 'vue';

export default {
	name: 'Echarts-map',
	data() {
		return {
			selectedValue: ref('china'),
			chart: null,
			mapIds: 'china',
			h: 800,
			w: 1000
		};
	},
	mounted() {
		this.initEcharts();
	},
	methods: {
		onChange(){
			this.mapIds = this.selectedValue;
			this.initEcharts();
		},
		// 双击返回		
		menuAction(){			
			if(this.mapIds != 'china' && this.mapIds != 'china-no-nanhai'){
				this.mapIds = this.selectedValue;
				this.initEcharts();
			}
		},
		initEcharts() {
			var that = this; // 内部相互调用方法需要
			var mapId = that.mapIds+''; // 强转字符串
			// 所有的地图 adcode
			const mapArray = ['china-no-nanhai','china', '110000', '120000', '130000', '140000', '150000', '210000', '220000', '230000', '310000', '320000', '330000', '340000', '350000', '360000', '370000', '410000', '420000', '430000', '440000', '450000', '460000', '500000', '510000', '520000', '530000', '540000', '610000', '620000', '630000', '640000', '650000', '710000', '810000', '820000'];
			if( mapArray.indexOf(mapId) == -1){
				//弹框太烦了，注释掉
				//alert('不存在子地图'+mapId+'，停止下钻，双击空白处返回上一级')
				return false;
			}
			//动态获取json，注册地图
			import('@/assets/mapGeojson/'+mapId+'.json').then(mapJson=>{
				if(echarts.getInstanceByDom(that.$refs.chartContainer))
				{
					that.chart.clear(); // 清空图标
				}
				else
					that.chart =  echarts.init(that.$refs.chartContainer);
				// 重新生成地图的数据
				echarts.registerMap(mapId, mapJson.default);
				let mapData = mapJson.default.features.map(function(obj) {					
					return {
						name: obj.properties.name, value: obj.properties.adcode
					};
				});
				const option = {
					// 鼠标移上时显示的信息
					tooltip: {
							triggerOn: 'mousemove',
							formatter: function (e) {
									return e.name + '：' + e.value }
					},
					// 地图 样式
					itemStyle: {			
						shadowBlur: 10,
						shadowColor: '#aaffff', // 发光色
					},
					geo: {
						type: "map",
						name: mapId,
						map: mapId, // 使用 registerMap 注册的地图名称。
						zoom: 1, //当前视角的缩放比例
						scaleLimit: { // 滚轮缩放的极限控制，默认的缩放为1
								min: 0.5,  // 最小的缩放值
								max: 2,  // 最大的缩放值
						},
						// 组件在容器中的位置
						left: 0, top: 0, right: 0, bottom: 0,
						roam: true, // 是否开启鼠标缩放和平移漫游
						label: { // 文字颜色
							show: true,
							fontSize: "12",
							color: "#94B1DC"
						},
						itemStyle: { //默认区域颜色
							borderColor: "#276DBD",
							borderWidth: 1,
							borderType: 'solid',
							shadowOffsetX: 0,
							shadowOffsetY: 0,
							areaColor: "#213554"
						},
						regions: [// 自定义地图区域样式设置
							{ name: '山东省', 
								itemStyle: { areaColor: '#fd0749',borderColor: '#fff8f0' },
								label: { color: '#ffffff' } },
							{ name: '烟台市', 
								itemStyle: { areaColor: '#FFDC63' },
								label: {color: '#ffffff' } },
								],
						selectedMode: 'single', // 选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选。
						// 选中状态下的多边形和标签样式。
						select: {
								disabled: false, // 是否可以被选中。在开启selectedMode的时候有效，可以用于关闭部分数据。
								// 选中区域文本标签
								label: {
										color: '#94B1DC',
								},
								// 高亮状态下图形样式
								itemStyle: {
										areaColor: '#1D4E8E', // 高亮区域的颜色。
										borderColor: '#276DBD', // 图形的描边颜色。
										borderWidth: 1, // 描边线宽。为 0 时无描边。
										borderType: 'solid', // 描边类型。'dashed''solid'
								},
						},
						// 地图hover样式
						emphasis: {
							disabled: false,
							focus: 'none',
							itemStyle: {
								areaColor: "#1D4E8E",
								shadowOffsetX: 0,
								shadowOffsetY: 0,
								shadowBlur: 20,
			
								borderWidth: 1,
								shadowColor: "rgba(0, 0, 0, 0.5)"
							},
							label: {
								show: true,
								fontSize: "12",
								color: "#94B1DC"
							}
						}
					},
					series: [
						{
							type: 'map',
							name: mapId,
							map: mapId, // 使用中国地图，也可以是其他地图名称
							geoIndex: 0, //使用geoIndex:0,使geo和type:map用同一个地图组件，map中的itemStyle属性失效，使用geo中的属性
							roam: true, // 是否开启鼠标缩放和平移漫游
							scaleLimit: { // 缩放的极限控制
									min: 0.5,
									max: 2
							},
							data: mapData
						},
					],
				};
				that.chart.setOption(option);
				that.chart.off('click') ; // 重点代码 避免点击事件重复执行
				// 点击跳转
				that.chart.on('click', function (params) {
					if (params.data) {
						//此处写点击事件内容
						that.mapIds = params.data.value;
						that.initEcharts();
					} else {
						return false;
					}
				});
			}).catch(e=>{
				console.info("错误信息：")
				console.info(e.message)
			});
		}
	}
}
</script>

<style>

</style>
